<template>
    <view class="lease-order-goods">
        <!-- Goods Image -->
        <u-image 
          width="168" 
          height="168" 
		  border-radius="24"
          :src="image" 
		  mode="scaleToFill"
        />
        
        <!-- Goods Info -->
        <view class="goods-info">
            <!-- Name -->
            <view class="goods-name">
                <slot name="name"></slot>
            </view>
            
            <!-- Specs -->
            <view class="goods-specs u-m-t-12">
                <slot name="specs"></slot>
            </view>
			<!-- 租期tenancy -->
            <view class="goods-specs u-m-t-8">
                <slot name="tenancy"></slot>
            </view>
			<!-- 数量num -->
			<view class="goods-specs u-m-t-8">
			    <slot name="num"></slot>
			</view>
            <!-- Price -->
            <view class="goods-price">
                <slot name="price"></slot>
            </view>
        </view>
    </view>
</template>


<script>
    export default {
        name: 'lease-order-goods',
        props: {
            // 图片路径
            image: {
                type: String,
                required: true
            }
        }
    }
</script>


<style scoped lang="scss">
    .lease-order-goods {
        display: flex;
		
    }
    
    .goods-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
    }
    
    .goods-name {
        font-size: 28rpx;
        font-weight: 500;
        color: #000000e6;
        
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .goods-specs {
        font-size: 24rpx;
       color: #00000066;
    }
	.goods-specs1 {
	    font-size: 24rpx;
	  color: #00000066;
	}
    
    .goods-price {
        font-size: 30rpx;
        color: #333333;
    }
</style>
